<template>
  <div class="binner-left">
    <div class="category">
      <div class="title">全部分类</div>
      <div class="content" @mouseleave="hideDetails">
        <ul class="category-list">
          <li class="category-list-item" @mouseenter="needShow(cate)" v-for="(cate, index) in category" :key="index">
            <svg class="icon category-icon" aria-hidden="true">
              <use :xlink:href="cate[0].icon"></use>
            </svg>
            <span v-for="(type, index) in cate" :key="index">
              <span class="type-left" :class="{ hide: index === 0 }">/</span>
              <router-link to="/food" class="type-item">{{ type.type }}</router-link>
            </span>
            <span class="category-icon-right iconfont icon-gengduo"></span>
          </li>
        </ul>
      </div>
      <div class="details" v-show="showDetails" @mouseenter="slideDetails" @mouseleave="hideDetails()">
        <ul class="details-list">
          <li class="details-list-item" v-for="(item, index) in list" :key="index">
            <div class="details-title">
              <router-link :to="item.href">{{ item.type }}</router-link>
            </div>
            <ul class="details-cate">
              <li class="cate-item" v-for="(its, index) in item.list" :key="index">
                <router-link class="cate-item-its" to="">{{ its }}</router-link>
              </li>
            </ul>
            <div class="details-more">
              <router-link to="">更多</router-link>
              <svg class="icon category-icon" aria-hidden="true">
                <use xlink:href="#icon-gengduo"></use>
              </svg>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        category: [],
        showDetails: false,
        list: []
      };
    },
    methods: {
      needShow(cate) {
        this.list = cate;
        this.showDetails = true;
      },
      hideDetails() {
        this.showDetails = false;
      },
      slideDetails() {
        this.showDetails = true;
      }
    },
    created() {
      this.$http.get('/category').then(resp => {
        this.category = resp.body;
      });
    }
  };
</script>

<style lang="stylus" rel="stylussheet/stylus">
  .binner-left
    position relative
    width 100%
    font-size 12px
    height 434px
    background #FFFFFF
    .category
      position absolute
      width 100%
      height 484px
      top -50px
      left 0
      box-sizing border-box
      border 1px solid rgba(7, 17, 27, 0.1)
      .title
        height 50px
        line-height 50px
        font-size 16px
        font-weight 700
        margin-left 15px
      .content
        .category-list
          margin 8px 0 8px 0
          .category-list-item
            position relative
            box-sizing border-box
            padding 2px 12px
            height 26px
            line-height 26px
            font-size 0
            overflow hidden
            &:hover
              background rgba(255, 150, 0, 0.08)
            .category-icon
              display inline-block
              vertical-align top
              font-size 16px
              height 26px
              line-height 26px
              margin-right 11px
            .type-left
              font-size 12px
              padding 0 4px
              color #666
              &.hide
                font-size 0
            .type-item
              display inline-block
              vertical-align top
              height 26px
              line-height 26px
              font-size 13px
            .category-icon-right
              position absolute
              right 12px
              top 0
              font-size 12px
      .details
        position absolute
        left 100%
        top 58px
        z-index 1000
        font-size 12px
        width 400px
        height 426px
        background #FFFFFF
        border-left 1px solid rgba(7, 17, 27, 0.1)
        .details-list-item
          position relative
          padding 0 30px
          .details-title
            margin-top 24px
            padding-bottom 10px
            box-sizing border-box
            border-bottom 1px solid rgba(7, 17, 27, 0.1)
            font-size 16px
            height 33px
            line-height 22px
          .details-cate
            .cate-item
              display inline-block
              font-size 12px
              line-height 15px
              margin 10px 16px 0 0
          .details-more
            position absolute
            top 0
            right 30px
            line-height 22px
            color #999999
</style>
